<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{ allInfo.totalSales }}</div>
      </div>
      <div class="item">总用户数
        <div class='num'>{{ allInfo.totalUser }}</div>
      </div>
      <div class="item">总商品数
        <div class='num'>{{ allInfo.totalGoods }}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{ allInfo.totalPaid }}</div>
      </div>
    </div>

      <!--2. 访问数据统计 ----------------->
      <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area" id="box1" style="width: 100%; height: 300px">比例分配</div>
    </div>


    <!-- 3.  -->
     <!-- 最新内容 -->
     <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>{{ allInfo.dayOrders }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">有效订单数</div>
             <div>{{ allInfo.validDayOrders }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
             <div>{{ allInfo.daySales }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div>{{ allInfo.monthOrders }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">有效订单数</div>
             <div>{{ allInfo.validMonthOrders }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">本月金额</div>
             <div>{{ allInfo.monthSales }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios' 
    export default{
      data(){
        return{
          allInfo:{}
        }
      },
      methods:{

      },
      mounted(){
        axios({
          url:'http://localhost:8080/polycystic/workspace/businessData',
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          }
        }).then(res=>{
          console.log(res.status);
          if(res.status!=200){
            this.$router.replace({
              name:'login'
            })
          }
          else{
            this.allInfo=res.data.data
            var myChart = echarts.init(document.getElementById('charts'));
            myChart.setOption({
              // title:{
              //   text:'今日销售情况'
              // },
              tooltip:{},
              xAxis:{//x轴数据
                data:['零食','好物','生活用品','衣物','药品','运动产品']
              },
              yAxis:{
                //y轴会自动创建数据
              },
              series:[//图表内容
                {
                  name:'销量',
                  type:'bar',//柱状图
                  data:[this.allInfo.snacks,this.allInfo.goodStuff,this.allInfo.householdGoods,this.allInfo.clothing,this.allInfo.drugssportsProducts]
                }
              ]
            })
            var myBox=echarts.init(document.getElementById('box1'))
            myBox.setOption({
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: this.allInfo.user1,
                      name: '青春期'
                    },
                    {
                      value: this.allInfo.user2,
                      name: '育龄期'
                    },
                    {
                      value: this.allInfo.user3,
                      name: '更年期'
                    }
                  ]
                }
              ]
            })
          }
        })
      },
    }
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    position: relative;
    .num {
      font-size: 42px;
      // margin: 10px;
      margin-top: 15px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}


.content {
  margin: 20px;
  display: flex;
  height: 320px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
  .item{
    text-align: center;
    font-size: 24px;
    color: #333;
    .el-col{
      border-right: 1px solid #eee;

    }
    .el-col:last-child{
      border-right: none;
    }
    .title{
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>